<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :maskClosable="false"
    :keyboard="false"
    :destroyOnClose="true"
    :footer="null"
    @cancel="handleCancel">
    
    <a-spin :spinning="loading">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus">新增联系人</a-button>
      </div>
      
      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading">
          
          <span slot="isPrimarySlot" slot-scope="text">
            <a-tag v-if="text" color="green">是</a-tag>
            <a-tag v-else color="orange">否</a-tag>
          </span>
          
          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
      <!-- table区域-end -->
    </a-spin>
    
    <contact-modal ref="modalForm" @ok="loadData"></contact-modal>
    
  </j-modal>
</template>

<script>
  import { contactList, contactDelete } from '@/api/crm'
  import ContactModal from './ContactModal'

  export default {
    name: "ContactListModal",
    components: {
      ContactModal
    },
    data() {
      return {
        title: "联系人列表",
        width: 900,
        visible: false,
        loading: false,
        customerId: '',
        customerName: '',
        dataSource: [],
        columns: [
          {
            title: '联系人姓名',
            align: "center",
            dataIndex: 'contactName',
            width: 120
          },
          {
            title: '职位',
            align: "center",
            dataIndex: 'position',
            width: 120
          },
          {
            title: '电话',
            align: "center",
            dataIndex: 'phone',
            width: 120
          },
          {
            title: '手机',
            align: "center",
            dataIndex: 'mobile',
            width: 120
          },
          {
            title: '邮箱',
            align: "center",
            dataIndex: 'email',
            width: 180
          },
          {
            title: '主要联系人',
            align: "center",
            dataIndex: 'isPrimary',
            width: 100,
            scopedSlots: { customRender: 'isPrimarySlot' }
          },
          {
            title: '备注',
            align: "center",
            dataIndex: 'remark',
            width: 180
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            width: 120,
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    methods: {
      show(customerId, customerName) {
        this.customerId = customerId;
        this.customerName = customerName;
        this.title = `${customerName} - 联系人列表`;
        this.visible = true;
        this.loadData();
      },
      close() {
        this.visible = false;
      },
      loadData() {
        this.loading = true;
        contactList({customerId: this.customerId}).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records || res.result;
          } else {
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.loading = false;
        });
      },
      handleAdd() {
        this.$refs.modalForm.add();
        this.$refs.modalForm.title = "添加联系人";
        this.$refs.modalForm.customerId = this.customerId;
      },
      handleEdit(record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑联系人";
        this.$refs.modalForm.customerId = this.customerId;
      },
      handleDelete(id) {
        this.loading = true;
        contactDelete({id: id}).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
          } else {
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.loading = false;
        });
      },
      handleCancel() {
        this.close();
      }
    }
  }
</script>

<style scoped>
  .table-operator {
    margin-bottom: 18px;
  }
</style> 